<template>
  <span>
    <el-button
      :type="btnType"
      :style="btnStyle"
      :icon="icon"
      :disabled="btnDisabled"
      :size="btnSize"
      :title="btnTitle"
      @click.stop.prevent="validRender"
    >{{ btnText }}</el-button>
    <el-dialog
      ref="dialog"
      v-bind="$attrs"
      :width="width"
      :top="dialogTop"
      :visible.sync="isShow"
      :custom-class="'edit-dialog' + ` ${customClass}`"
      :append-to-body="appendToBody"
      :close-on-click-modal="closeOnClickModal"
      :lock-scroll="true"
      :title="title"
      @open="opened"
      @close="close"
    >
      <template slot="title">
        <slot name="title" />
      </template>
      <slot />
      <div v-if="isHandleButton" slot="footer">
        <el-button @click="closeDialog">关闭</el-button>
        <slot name="extra-button" />
        <el-button
          type="primary"
          :disabled="submitLoading"
          class="submit-btn"
          @click="submit"
        >{{ submitText }}</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import ShowSwitchMixin from 'modules/mixins/show-switch'
import { isFunction } from 'lodash'

export default {
  mixins: [ShowSwitchMixin],
  inheritAttrs: false,
  props: {
    btnTitle: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '800px'
    },
    isHandleButton: {
      type: Boolean,
      default: true
    },
    isWaterMark: {
      type: Boolean,
      default: true
    },
    submitText: {
      type: String,
      default: '提交'
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    customClass: {
      type: String,
      default: ''
    },
    btnDisabled: {
      type: Boolean,
      default: false
    },
    btnClass: {
      type: String,
      default: ''
    },
    btnText: {
      type: [String, Number],
      default: ''
    },
    btnType: {
      type: String,
      default: 'primary'
    },
    btnStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    btnSize: {
      type: String,
      default: 'medium'
    },
    dialogTop: {
      type: String,
      default: '60px'
    },
    isValidRender: {
      type: Boolean,
      default: false
    },
    validRenderFun: {
      type: Function,
      default() {
        return () => {}
      }
    },
    submitLoading: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    validRender() {
      if (this.isValidRender) {
        const { validRenderFun } = this
        isFunction(validRenderFun) &&
          validRenderFun().then(() => {
            this.open()
          })
      } else {
        this.open()
      }
    },
    open() {
      this.show()
      this.$emit('open')
    },
    submit() {
      this.$emit('submit', this.closeDialog)
    },
    close() {
      this.$emit('close')
    },
    closeDialog() {
      this.$refs.dialog.handleClose()
      this.close()
    },
    opened() {
      this.$nextTick(() => {
        this.$emit('opened')
      })
    }
  }
}
</script>
